<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">
          查询搜索
        </el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input v-model="listQuery.name" class="input-width" placeholder="名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="输入搜索：">
            <el-input v-model="listQuery.code" class="input-width" placeholder="编码" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>
      <el-button class="btn-add" @click="handleAddMenu()" size="mini">
        添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="menuTable" style="width: 100%" :data="list" v-loading="listLoading" height="500px" row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="名称" prop="name" width="260px">
        </el-table-column>
        <el-table-column label="编码" prop="code">
        </el-table-column>
        <el-table-column label="图标">
          <template slot-scope="scope"><i :class="scope.row.icon"></i></template>
        </el-table-column>
        <el-table-column label="是否显示">
          <template slot-scope="scope">
            <el-button :type="scope.row.status == 0 ? 'primary' : 'danger'" plain>{{ scope.row.status == 0 ? "启用" : '禁用'
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort">
        </el-table-column>
        <el-table-column label="备注" prop="remarks">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.size" :page-sizes="[10, 15, 20]"
        :current-page.sync="listQuery.page" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="750px" :before-close="handleClose">
      <MenuDetail v-if="dialogVisible" :rowData="rowData" :isAdd="isAdd" @onSubmit="onSubmit" @clonsForm="clonsForm">
      </MenuDetail>
    </el-dialog>
  </div>
</template>

<script>
import { permissionList, deletePermissionInfo } from '@/api/menu'
import MenuDetail from './components/MenuDetail'
const defaultListQuery = {
  page: 1,
  size: 10,
  name: null,
  status: null
};
export default {
  name: "menuList",
  components: { MenuDetail },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: null,
      listLoading: true,
      dialogVisible: false,
      isAdd: false,
      rowData: {}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索重置
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
      this.getList();
    },
    // 搜索
    handleSearchList() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 分页
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    // 表单关闭
    clonsForm() {
      this.dialogVisible = false
      this.isAdd = false
    },
    // 表单提交
    onSubmit() {
      this.handleClose()
    },
    // 新增弹框关闭
    handleClose() {
      this.dialogVisible = false
      this.isAdd = false
      this.rowData = {}
    },
    // 新增按钮
    handleAddMenu() {
      this.dialogVisible = true
      this.isAdd = true
      this.rowData = {}

    },
    // 列表数据
    getList() {
      this.listLoading = true;
      let par = {
        page: this.listQuery.page,
        size: this.listQuery.size,
        name: this.listQuery.name,
        code: this.listQuery.code
      }
      permissionList(par).then(response => {
        if (response.code == 200) {
          this.listLoading = false;
          this.list = response.data;
          this.total = response.total;
        }
      });
    },
    // 编辑
    handleUpdate(index, row) {
      this.dialogVisible = true
      this.isAdd = false
      this.rowData = row
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm('是否要删除该菜单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePermissionInfo({ id: row.id }).then(response => {
          if (response.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
            this.getList();
          }
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped></style>
